import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
// import CategoryView from '../views/CategoryView.vue'
// 导入js （顶部进度条组件）
import NProgress from 'nprogress'
// 导入css
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false });

Vue.use(VueRouter)
// 什么页面可以缓存？
// 01 页面不会经常更新，可以缓存，02页脚会重复使用
const routes = [{
		path: '/',
		name: 'home',
		component: HomeView,
		meta: {
			keep: true,
		}
	},
	{
		path:'/inter',
		name:"inter",
		// 异步加载的方式，（用到的时候才会加载）
		component:()=>import('../views/InterView.vue'),
	},
	{
		path:'/map',
		name:"map",
		component:()=>import('../views/MapView.vue'),
	},
	{
		path:'/baidu',
		name:"百度",
		component:()=>import('../views/BaiduView.vue'),
	},
	{
		path:"/search/list",
		name:"slist",
		component:()=>import('../views/search/SearchList.vue'),
		meta: {
			noFoot:true ,
		}
	},
	{
		path:"/waterfall",
		name:"waterfall",
		component:()=>import('../views/WaterFall.vue'),
		meta: {
			noFoot:true ,
		}
	},
	{
		path: "/category",
		// 只要需要权限的页面，都配置一个meta元信息
		meta: {
			// requireAuth: true
			keep: true,
		},
		name: "category",
		// 按需动态的加载组件（组件被用到了才会被加载过来）
		// webpack魔法注释,给新加载的js命名
		component: () => import( /* webpackChunkName: "category" */  "../views/CategoryView.vue"),
		// component: CategoryView
	},
	{
		path: "/ball",
		meta: {
			requireAuth: true
		},
		name: "ball",
		component: () => import("../views/BallView.vue")
	},
	{
		// 定义一个元信息，标识当前页面不需要路由
		meta: {
			noFoot: true
		},
		path: "/cart",
		name: "cart",
		component: () => import("../views/CartView.vue")
	},
	{
		meta: {
			noFoot: true
		},
		// 带参数的路由 /:
		path: "/product/:id",
		name: "product",
		component: () => import("../views/ProductView.vue")
	},
	{
		path: "/user",
		name: "user",
		component: () => import("../views/user/UserView.vue")
	},
	{
		path: "/login",
		name: "login",
		beforeEnter(to, from, next) {
			console.log("登录进入前");
			next(true);
		},
		component: () => import("../views/user/LoginView.vue")
	},
	{
		meta: {
			noFoot: true
		},
		path: "/reg",
		name: "reg",
		component: () => import("../views/user/RegisterView.vue")
	},
	{
		path: '/about',
		name: 'about',
		// route level code-splitting
		// this generates a separate chunk (about.[hash].js) for this route
		// which is lazy-loaded when the route is visited.
		component: () => import( /* webpackChunkName: "about" */ '../views/AboutView.vue')
	}
]
 
const router = new VueRouter({
	routes
})
router.beforeEach((to, from, next) => {
	NProgress.start();
	// 如果要去的也有meta.requireAuth 判断是否登录
	if (to.meta.requireAuth) {
		if (localStorage.getItem("token")) {
			next(true);
		} else {
			alert("需要权限，请先登录");
			next("/login?redirect=" + to.path)
		}
	} else {
		next(true);
	}
})
// 全局导航守卫函数 beforeEach每个路由进入都会先调用这个函数
// afterEach 每个路由离开前都会调用这个函数
// 在afterEach里面 先判断元信息meta是不是requireAuth
// 如果是requireAuth 判断是否是已经登录，
// 如果已经登录 next放行 
// 如果没有登录 next(/login)

router.afterEach(()=>{
	// 进入页面结束进度条
	NProgress.done();
})


export default router
